<template>
<!-- 收付费作业-出盘锁维护页面 -->
    <div class="fillcontain">
        <!-- CYQ:20200117-收付费作业-出盘锁维护-->
        <el-form :model="searchParams" :rules="rules" ref="ruleForm" label-width="100px" class="search_container">
            <el-row>
              <!-- <el-col :span="24"> -->
                <el-col :span="6">
                    <el-form-item label="保单号码" prop="chdrNum" class="text_center">
                        <el-input v-model="searchParams.chdrNum" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="6" class="text_center">
                    <el-form-item label="受理号" prop="applNum">
                        <el-input v-model="searchParams.applNum" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>

                <!-- CYQ:20200114-收付费作业-出盘锁查询 -->
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain  icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
              <!-- </el-col> -->
            </el-row>
        </el-form>

        <div class="contain">
            <div class="table_container">
                <el-table v-loading="loading" :data="tableData" highlight-current-row header-cell-class-name="table-header-class" style="width:100%">
                    <el-table-column
                        min-width="120"
                        property="chdrNum"
                        label="保单号码"
                        align='center'
                        show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column
                        min-width="120"
                    property="platType"
                    label="出盘类型"
                    align='center'
                    show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column
                    min-width="120"
                    property="applNum"
                    label="受理号"
                    align='center'
                    show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column
                    min-width="120"
                    property="customName"
                    label="客户姓名"
                    align='center'
                    show-overflow-tooltip>
                    </el-table-column> 

                    <el-table-column
                    min-width="120"
                    property="bankAccount"
                    label="账号"
                    align='center'
                    show-overflow-tooltip>
                    </el-table-column> 

                    <el-table-column
                    min-width="120"
                    property="orginAmount"
                    label="金额"
                    align='center'
                    show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column
                    min-width="120"
                    property="tradeStatus"
                    label="状态"
                    align='center'
                    show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column
                    min-width="120"
                    property="lockStatus"
                    label="锁状态"
                    align='left'
                    show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div class="">
                                <!-- <el-col :span="6">{{scope.row.lockStatus}}</el-col> -->
                                <el-col :span="12">
                                    <el-button type="primary" plain  v-if="scope.row.lockStatus == 'N'"  @click="reLockOperation(scope.row)">锁定</el-button>
                                    <el-button type="primary" plain  v-if="scope.row.lockStatus == 'Y'"  @click="reLockOperation(scope.row)">解锁</el-button>
                                </el-col>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column 
                        min-width="120"
                        property="updateUser"
                        label="经办人"
                        align='center'
                        show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column 
                        min-width="120"
                        property="updateDate"
                        label="处理时间"
                        align='center'
                        show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column 
                        min-width="120"
                        property="firstOutPaltDate"
                        label="首次出盘日"
                        align='center'
                        show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column 
                        min-width="120"
                        property="transferDateLine"
                        label="转账截止日"
                        align='center'
                        show-overflow-tooltip>
                    </el-table-column>

                </el-table>

                <el-row>
                        <el-col :span="24">
                            <div class="pagination">
                                <el-pagination
                                    background
                                    v-if='paginations.total > 0'
                                    :page-sizes="paginations.pageSizes"
                                    :page-size="paginations.pageSize"
                                    :layout="paginations.layout"
                                    :total="paginations.total"
                                    :current-page='paginations.pageIndex'
                                    @current-change='handleCurrentChange'
                                    @size-change='handleSizeChange'>
                                </el-pagination>
                            </div>
                        </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex';
    import { findSellOutLockQueryList,updateSellOutLockTypeByParams } from '@/api/selloutLock/selloutlock';
    import constant from '@/utils/constant';
    export default {
        data(){
            return {
                // 查询条件
                rules:{
                    applNum:[],
                    chdrNum:[]
                },
                searchParams:{
                    applNum:'', //客户号
                    chdrNum:'', //客户姓名
                },
                tableData: [],
                loading:false,
              //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                pickerOptions1: {
                   disabledDate(time) {
                    return time.getTime() > Date.now();
                  }
                },
                newLockStatus:'',//CYQ:20200122-收付费作业-出盘锁维护-更新锁状态
            }
        },
        created(){
            //this.getList();
        },
        mounted(){
            // this.getList();
        },
        methods: {

            //CYQ:20200117-收付费作业-出盘锁维护-加解锁
            reLockOperation(row){
                this.newLockStatus = '';
                console.log(JSON.stringify(row));
                if(row.lockStatus != null && row.lockStatus == 'N'){
                    this.newLockStatus = 'Y';
                }else if(row.lockStatus != null && row.lockStatus == 'Y'){
                    this.newLockStatus = 'N';
                }

                let params = {
                    "applNum"       : row.applNum,
                    "chdrNum"       : row.chdrNum,
                    "platType"      : row.platType,
                    "clockType"     : row.clockType,
                    "lockStatus"    : row.lockStatus,//原纪录锁状态
                    "newLockStatus" : this.newLockStatus,
                    "updateUser"    : '',
                    "orginAmount"   : row.orginAmount,//更新金额
                }
               
                this.$store.dispatch('loading/CHANGE_LOADING',true);
                updateSellOutLockTypeByParams(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                    if(res.resultCode == constant.SUCCESS){
                        this.$message({
                            message: res.resultMsg,
                            type: 'success'
                        });
                        this.getList2();
                    }
                   
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },

            //CYQ:20200117-收付费作业-出盘锁维护-锁状态字段转化
            lockStatusInfo(row){
                if(row.lockStatus == 'N'){
                    return "未加锁";
                }
                else if(row.lockStatus == 'Y'){
                    return "已加锁";
                }else{
                    return '未知';
                }
            },
             // 查询列表
            getList2(){
                this.paginations.total=0;
                let params = {
                    "applNum": this.searchParams.applNum,
                    "chdrNum": this.searchParams.chdrNum,
                    "pageNumber": this.paginations.pageIndex,
                    "pageSize": this.paginations.pageSize,
                    "pageNumber": this.paginations.pageIndex,
                    "orderBy":"",
                }
                           
                this.$store.dispatch('loading/CHANGE_LOADING',true)
                findSellOutLockQueryList(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if(res.resultCode == constant.SUCCESS){
                        this.paginations.total = res.data.total;
                        this.tableData = [];
                        this.tableData = res.data.list;
                    }else{
                        this.$message({
                            message:res.resultMsg,
                            type: 'error'
                        });
                        return false;
                    }
                   
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            // 查询列表
            getList(){
                this.paginations.total=0;
                let params = {
                    "applNum": this.searchParams.applNum,
                    "chdrNum": this.searchParams.chdrNum,
                    "pageNumber": this.paginations.pageIndex,
                    "pageSize": this.paginations.pageSize,
                    "pageNumber": this.paginations.pageIndex,
                    "orderBy":"",
                }
                
                if((params.applNum == null || params.applNum == '')  && (params.chdrNum == '' || params.chdrNum == null)){
                    this.$message({
                        message: '请至少输入一个查询条件来查询!',
                        type: 'error'
                    });
                    return false;
                }

                 //限制为数字
                if(params.applNum!='' && isNaN(params.applNum)){
                    this.$message({
                        message: '受理号必须为数字!',
                        type: 'error'
                    });
                    return false;
                }
                if(params.chdrNum!='' && isNaN(params.chdrNum)){
                    this.$message({
                        message: '保单号必须为数字!',
                        type: 'error'
                    });
                    return false;
                }
                    

                this.$store.dispatch('loading/CHANGE_LOADING',true)
                findSellOutLockQueryList(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if(res.resultCode == constant.SUCCESS && res.data && res.data.list.length){
                        this.paginations.total = res.data.total;
                        this.tableData = res.data.list;
                        // this.$message({
                        //     message: '查询成功!',
                        //     type: 'success'
                        // });
                    }
                   
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
               this.paginations.pageSize = pageSize;
               this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
               this.paginations.pageIndex = page;
               this.getList();
            },
            // 根据条件查询列表
            subGetList(){
                this.paginations.pageIndex=1;
                this.getList();
            },
            // 清除查询条件
            resetSearch(){
                this.searchParams.applNum = '';
                this.searchParams.chdrNum = '';
            }
        },
        computed:{
            ...mapGetters(['tags']),
            reload(){
                return this.$store.state.loading.reload;
            }
        },
        activated(){
            if(this.reload){
                this.$store.dispatch('loading/CHNAGE_RELOAD',false)
                Object.assign(this.$data, this.$options.data());
            }
        }
    }
</script>

<style lang="less" scoped>
    .fillcontain{
        padding-bottom: 0;
    }
    .contain{
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }
   .pagination{
       padding: 10px 20px;
       text-align: right;
   }
   .operationIcon{
        // padding: 12px;
        border:1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px; 
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow:0 0 3px #f9f9f9;
        .svg-icon{
            font-size: 14px;
            fill:#68a3fc;
        }
   }
   .search_container{
       padding: 20px 20px 0 20px;
   }
</style>



